{% include "../common/_app_css.html" %}
<div class="layui-fluid" id="app">
    <el-card class="box-card app-min-view">
        <div slot="header" class="clearfix">
            <span>网站信息设置</span>
        </div>
        <el-form ref="modelForm" class="app-setting-form" :model="modelForm" label-width="80px">
            <el-row>
                <el-col span="12">
                    <el-form-item label="允许评论">
                        <el-select v-model="modelForm.allow_comment" placeholder="允许评论">
                            <el-option v-for="item in commentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item label="显示轮播">
                        <el-select v-model="modelForm.show_banner" placeholder="允许评论">
                            <el-option v-for="item in bannerOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="12">
                    <el-form-item label="域名">
                        <el-input v-model="modelForm.domain"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item label="标题">
                        <el-input v-model="modelForm.site_name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col span="12">
                    <el-form-item label="联系邮箱">
                        <el-input v-model="modelForm.email"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item label="联系人">
                        <el-input v-model="modelForm.contact"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="12">
                    <el-form-item label="联系电话">
                        <el-input v-model="modelForm.phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item label="备案ICP">
                        <el-input v-model="modelForm.icp"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="12">
                    <el-form-item label="模板名称">
                        <el-select v-model="modelForm.tpl" placeholder="请选择模板">
                            <el-option v-for="item in tplOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item label="公司名称">
                        <el-input v-model="modelForm.company"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="关键字">
                <el-input v-model="modelForm.keyword"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="modelForm.description"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="modelForm.address"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" @click="updateData">确认</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
{% include "../common/_app_js.html" %}
<script>
    var vm = app.vue({
        el: '#app',
        data() {
            return {
                loading: false,
                modelForm: {
                    domain: '',
                    phone: '',
                    contact: '',
                    icp: 'green',
                    tpl: null,
                },
                tplOptions: [
                    { value: 'home', label: '默认主题' },
                    { value: 'defaulted', label: '极简主题' },
                    { value: 'green', label: '绿色主题' },
                ],
                commentOptions: [
                    { value: true, label: '允许评论' },
                    { value: false, label: '暂停评论' }
                ],
                bannerOptions: [
                    { value: true, label: '显示轮播' },
                    { value: false, label: '隐藏轮播' }
                ]
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                app.request({
                    method: 'get',
                    url: 'system/setting/list',
                }).then((res) => {
                    this.modelForm = res.data.rows

                    setTimeout(() => {
                        this.loading = false
                    }, 80)
                })
            },
            updateData() {
                this.$refs.modelForm.validate(valid => {
                    if (valid) {
                        app.request({
                            method: 'put',
                            url: 'system/setting/update',
                            data: this.modelForm,
                        }).then(() => {
                            this.$refs.modelForm.resetFields()
                            this.getList()

                            this.$notify({
                                title: 'Success',
                                message: '修改成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            }
        }
    })
</script>
